<template>
  <div class="tutorial-menu">
    <a-collapse :bordered="false" :activeKey="defaultActiveKey" accordion>
      <template #expandIcon="props">
        <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
      </template>
      <a-collapse-panel v-for="item in menu" :key="String(item.postsId)" :showArrow="!!item.children?.length">
        <template #header>
          <div class="header" @click="handleTutorialDetail(item)" :class="{ selected: modelValue === item.postsId }">
            <i class="ri-file-word-2-line"></i>
            <span>{{ item.title }}</span>
          </div>
        </template>
        <div class="catalog-list">
          <p
            class="catalog-list-item"
            :class="{ selected: modelValue === itemName.postsId }"
            v-for="itemName in item.children"
            :key="itemName.postsId"
            @click="handleTutorialDetail(itemName)">
            <i class="ri-folder-open-line"></i>
            <span>{{ itemName.title }}</span>
          </p>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
export default {
  name: 'TutorialMenu',
  props: {
    menu: {
      type: Array,
      default: () => []
    },
    tutorialId: [String, Number],
    modelValue: [String, Number]
  },
  model: {
    prop: 'modelValue',
    event: 'update:modelValue'
  },
  data () {
    return {
      defaultActiveKey: null
    }
  },

  created () {
    for (let i = 0; i < this.menu.length; i++) {
      const menu = this.menu[i]
      const t = menu.children.find(o => o.postsId === this.modelValue)
      if (t) {
        this.defaultActiveKey = String(menu.postsId)
        break
      }
    }
  },

  methods: {
    handleTutorialDetail (tutorialItem) {
      document.documentElement.scrollTop = 0
      if (tutorialItem.children.length) return
      this.$router.push(`/tutorial/${this.tutorialId}/${tutorialItem.postsId}`)
      this.$emit('update:modelValue', tutorialItem.postsId)
    }
  }
}
</script>
<style lang="less" scoped>
.tutorial-menu {
  height: 0;
  flex: 1;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  ::v-deep .ant-collapse {
    background-color: transparent;
    .ant-collapse-item {
      border-bottom: none;
      .ant-collapse-header {
        padding: 0 12px;
        padding-left: 24px;
        color: #3f3f46;
        .header {
          display: flex;
          align-items: center;
          padding: 0 12px;
          border-radius: 4px;
          line-height: 30px;
          &.selected {
            color: var(--primary-color);
            background-color: var(--select-primary-color);
          }
          i {
            font-size: 17px;
            margin-right: 6px;
          }
          span {
            flex: 1;
            width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .ant-collapse-content {
        padding: 0 12px 0 32px;
        &-box {
          padding: 0;
        }
        .catalog-list {
          &-item {
            font-size: 14px;
            color: #3f3f46;
            cursor: pointer;
            display: flex;
            align-items: center;
            height: 30px;
            padding: 0 12px;
            border-radius: 4px;
            &.selected {
              color: var(--primary-color);
              background-color: var(--select-primary-color);
            }
            i {
              font-size: 17px;
              margin-right: 6px;
              position: relative;
              top: 2px;
            }
            span {
              flex: 1;
              width: 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
